<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>15.描边</title>
</head>
<body>
	<canvas id="canvas" style="background-color: #000;"></canvas>
	<script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
	<script src="https://webglfundamentals.org/webgl/resources/m4.js"></script>
	<script src="https://webglfundamentals.org/webgl/resources/primitives.js"></script>
	<script src="https://webglfundamentals.org/webgl/resources/texture-utils.js"></script>
	<script src="https://webglfundamentals.org/webgl/resources/chroma.min.js"></script>
	<script type="x-shader/x-vertex" id="vertex1">
		attribute vec4 a_position;
		attribute vec3 a_normal;
		uniform mat4 u_projection;
		uniform mat4 u_view;
		uniform mat4 u_world;
		varying vec3 v_normal;
		void main(){
			gl_Position =  u_projection * u_view * u_world * a_position;
			gl_Position.xyz/=1.02;

			v_normal=(u_world*vec4(a_normal,1.)).xyz;
			
		}
	</script>
	<script type="x-shader/x-fragment" id="fragment1">
		precision mediump float;
		varying vec3 v_normal;
		void main(){
			gl_FragColor = vec4(1.,0.,0.,1.);
			float intensity = pow( 0.8 - dot( (v_normal), vec3( 0, 0, 1.0 ) ), 12.01 );
			gl_FragColor = vec4( 1.2, 1.1, 1.1, 1.0 ) * intensity;
			//float intensity = 1.05 - dot( v_normal, vec3( 0.0, 0.0, 1.0 ) );
			//vec3 atmosphere = vec3( 1.0, 1.0, 1.0 ) * pow( intensity, 3.0 );
			//gl_FragColor = vec4( vec3(0.3,0.5,0.2) + atmosphere, 1.0 );
		}
	</script>
	<script type="x-shader/x-vertex" id="vertex2">
		attribute vec4 a_position;
		attribute vec3 a_normal;
		uniform mat4 u_projection;
		uniform mat4 u_view;
		uniform mat4 u_world;
		varying vec3 v_normal;
		void main(){
			gl_Position =  u_projection * u_view * u_world * a_position;
			v_normal=(u_world*vec4(a_normal,1.)).xyz;
		}
	</script>
	<script type="x-shader/x-fragment" id="fragment2">
		precision mediump float;
		varying vec3 v_normal;
		void main(){
			gl_FragColor = vec4(0.,1.,0.,1.);
			float intensity = 1.05 - dot( v_normal, vec3( 0.0, 0.0, 1.0 ) );
			vec3 atmosphere = vec3( 1.0, 1.0, 1.0 ) * pow( intensity, 3.0 );
			gl_FragColor = vec4( vec3(1.0, 1.0, 1.0 ) + atmosphere, 1.0 );
		}
	</script>
	<script>
		const canvas = document.getElementById("canvas");
		canvas.width=window.innerWidth
		canvas.height=window.innerHeight
		const gl = canvas.getContext("webgl")
		const aspect = gl.canvas.clientWidth/ gl.canvas.clientHeight;
		const programInfo=webglUtils.createProgramInfo(gl,["vertex1","fragment1"])
		const programInfo2=webglUtils.createProgramInfo(gl,["vertex2","fragment2"])
		// const planeBufferInfo = primitives.createCubeBufferInfo(
		// 	gl,
		// 	20
		// );
		const planeBufferInfo = primitives.createSphereBufferInfo(
			gl,
			20,  // radius
			50, // subdivisions around
			50,  // subdivisions down
		);
		gl.useProgram(programInfo.program)
		const cameraMatrix = m4.lookAt([50,50,50],[0,0,0],[0,1,0])
		const viewMatrix=m4.inverse(cameraMatrix)
		function degToRad(d) {
			return d * Math.PI / 180;
		}
		
    var cameraPosition = [0, 0, 2];
	var world=m4.translation(0, 0, 0)
	let t=0
	var worldCameraPositionLocation = gl.getUniformLocation(programInfo.program, "u_worldCameraPosition");
	setInterval(()=>{
		
		gl.useProgram(programInfo.program)
		world = m4.yRotate(world, 0.001)
		const projectionMatrix=m4.perspective(degToRad(60), aspect, 1, 2000);
		webglUtils.setBuffersAndAttributes(gl, programInfo, planeBufferInfo);
		webglUtils.setUniforms(programInfo, {
			u_view: viewMatrix,					//视图
			u_projection: projectionMatrix,		//投影
			u_world:world,	//世界
		});
		
		gl.enable(gl.DEPTH_TEST);
		webglUtils.drawBufferInfo(gl, planeBufferInfo);
		gl.useProgram(programInfo2.program)
		webglUtils.setBuffersAndAttributes(gl, programInfo2, planeBufferInfo);
		webglUtils.setUniforms(programInfo2, {
			u_view: viewMatrix,					//视图
			u_projection: projectionMatrix,		//投影
			u_world:world,	//世界
		});
		gl.enable(gl.DEPTH_TEST);
		webglUtils.drawBufferInfo(gl, planeBufferInfo);
	},0)
	</script>
</body>
</html>